<template>
	<QItem
		v-if="!data.children"
		v-ripple
		:to="data.route"
		:inset-level="level"
		active-class="lexmis--active"
		clickable>
		<QItemSection v-if="data.icon" avatar>
			<QIcon color="primary" :name="data.icon"/>
		</QItemSection>
		<QItemSection>{{data.name}}</QItemSection>
	</QItem>
	<QExpansionItem
		v-else
		:default-opened="data.open"
		expand-separator
		:header-inset-level="level"
		active-class="lexmis--active"
		:label="data.name"
		:icon="data.icon">
		<MenuInnerRecursion
			v-for="(item,index) in data.children"
			:key="index"
			:data="item"
			:level="level+0.4"/>
	</QExpansionItem>
</template>

<script>
import {
	QExpansionItem,
	QItem,
	QItemSection,
	QIcon
} from 'quasar';

export default {
	name:'MenuInnerRecursion',
	components:{
		QExpansionItem,
		QItem,
		QItemSection,
		QIcon,
	},
	props:{
		data:{
			type:Object,
			default(){
				return {};
			}
		},
		level:{
			type:Number,
			default:0
		}
	}
};
</script>

<style lang="scss">

</style>
